<template>
	<view class="container">
		<view class="header">
			<text class="title">房间列表</text>
		</view>
		<view class="room-list">
			<view v-for="(room, index) in rooms" :key="index" class="room-item">
				<!-- 房间信息 -->
				<view class="room-info">
					<view class="info-row">
						<text class="label">房间名称：</text>
						<text class="value">{{ room.name }}</text>
					</view>
					<view class="info-row">
						<text class="label">起订时长：</text>
						<text class="value">{{ room.duration }}</text>
					</view>
				</view>
				<!-- 操作按钮 -->
				<view class="room-actions">
					<text class="action red" @click="deleteRoom(index)">删除房间</text>
					<view class="separator"></view>
					<text class="action" @click="editRoom(index)">编辑房间</text>
				</view>
			</view>
		</view>
		<button class="add-room-button" @click="addRoom">添加房间</button>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				rooms: [{
						name: '测试房间 01',
						duration: '30分钟'
					},
					{
						name: '测试房间 02',
						duration: '30分钟'
					}
				]
			};
		},
		methods: {
			deleteRoom(index) {
				this.rooms.splice(index, 1);
			},
			editRoom(index) {
				console.log('编辑房间', index);
			},
			addRoom() {
				console.log('添加房间');
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		padding-bottom: 150rpx;
		height: 100vh;
		/* 为固定按钮预留空间 */
	}

	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
		background-color: #fff;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.room-list {
		margin-top: 100rpx;
	}

	.room-item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: stretch;
		padding: 20rpx;
		border: 1px solid #eee;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
	}

	.room-info {
		display: flex;
		flex-direction: column;
		margin-bottom: 10rpx;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.label {
		font-size: 28rpx;
		color: #000;
	}

	.value {
		margin-top: 28rpx;
		font-size: 28rpx;
		color: #000;
	}

	.room-actions {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.action {
		font-size: 28rpx;
		color: #000000;
		cursor: pointer;
		padding: 0 40px;
		font-weight: bold;
	}

	.red {
		color: #FF0000;
	}

	.separator {
		width: 1px;
		height: 28rpx;
		background-color: #ccc;
		margin: 0 10rpx;
	}

	/* 添加房间按钮固定在底部 */
	.add-room-button {
		position: fixed;
		bottom: 20rpx;
		left: 20rpx;
		right: 20rpx;
		height: 95rpx;
		line-height: 95rpx;
		background-color: #65C61D;
		color: #fff;
		border: none;
		border-radius: 20rpx;
		font-size: 32rpx;
		cursor: pointer;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
		z-index: 100;
		/* 确保按钮位于最上层 */
	}

	.add-room-button:hover {
		background-color: #45a049;
	}
</style>